<!-- 订单详情 -->
<template>
  <div class="dashboard-container edit-order">
    <div class="app-container">
      <el-card shadow="never" class="search-card-box">
        <el-descriptions :column="4" size="medium">
          <el-descriptions-item
            label="订单编号"
            contentStyle="margin-left: 27px; color:#818693;"
            >{{ editOrderFrom.id }}</el-descriptions-item
          >
          <el-descriptions-item
            label="运单编号"
            contentStyle=" color:#818693;"
            >{{ editOrderFrom.transportOrder.id }}</el-descriptions-item
          >
          <el-descriptions-item
            label="下单时间"
            contentStyle=" color:#818693;"
            >{{ editOrderFrom.createTime }}</el-descriptions-item
          >
          <el-descriptions-item
            label="订单状态"
            contentStyle=" color:#818693;"
            >{{ status }}</el-descriptions-item
          >
          <el-descriptions-item
            label="预计到达时间"
            contentStyle=" color:#818693;"
            >{{ editOrderFrom.estimatedArrivalTime }}</el-descriptions-item
          >
        </el-descriptions>
      </el-card>
      <el-collapse v-model="activeNames">
        <!-- 基本信息 -->
        <el-collapse-item title="基本信息" name="1">
          <el-descriptions :column="2" size="medium" title="发货方">
            <div slot="title" class="header-title">
              <span class="title-name">
                <img
                  src="../../assets/fahuo.png"
                  style="width: 14px; height: 18px; margin-right: 10px; "
                />
              </span>
              <span class="title-age">发货方</span>
            </div>
            <el-descriptions-item
              label="发货方姓名"
              contentStyle=" color:#818693;"
              labelStyle="margin-left:40px;"
              >{{ editOrderFrom.senderName }}</el-descriptions-item
            >
            <el-descriptions-item
              label="发货方电话"
              contentStyle=" color:#818693;"
              >{{ editOrderFrom.senderPhone }}</el-descriptions-item
            >
            <el-descriptions-item
              label="发货方地址"
              contentStyle=" color:#818693;"
              labelStyle="margin-left:40px;"
              >{{ editOrderFrom.senderProvince.name }}
              {{ editOrderFrom.senderCity.name }}
              {{ editOrderFrom.senderCounty.name }}
            </el-descriptions-item>
            <el-descriptions-item
              label=" 详细地址"
              contentStyle=" color:#818693;"
              >{{ editOrderFrom.senderAddress }}</el-descriptions-item
            >
          </el-descriptions>
          <el-descriptions
            :column="2"
            size="medium"
            icon="el-icon-location-outline"
            title="发货方"
            style="margin-top: 20px;"
          >
            <div slot="title" class="header-title">
              <span class="title-name">
                <img
                  src="../../assets/shouhuo.png"
                  style="width: 17px; height: 17px; margin-right: 10px; "
                />
              </span>
              <span class="title-age">收货方</span>
            </div>
            <el-descriptions-item
              label="收货方姓名"
              contentStyle=" color:#818693;"
              labelStyle="margin-left:40px;"
              >{{ editOrderFrom.receiverName }}</el-descriptions-item
            >
            <el-descriptions-item
              label="收货方电话"
              contentStyle=" color:#818693;"
              >{{ editOrderFrom.receiverPhone }}</el-descriptions-item
            >
            <el-descriptions-item
              label="收货方地址"
              contentStyle=" color:#818693;"
              labelStyle="margin-left:40px;"
              >{{ editOrderFrom.receiverProvince.name }}
              {{ editOrderFrom.receiverCity.name }}
              {{ editOrderFrom.receiverCounty.name }}
            </el-descriptions-item>
            <el-descriptions-item
              label=" 详细地址"
              contentStyle=" color:#818693;"
              >{{ editOrderFrom.receiverAddress }}</el-descriptions-item
            >
          </el-descriptions>
          <el-descriptions
            :column="2"
            size="medium"
            icon="el-icon-location-outline"
            title="发货方"
            style="margin:20px 0;"
          >
            <div slot="title" class="header-title">
              <span class="title-name">
                <img
                  src="../../assets/juli.png"
                  style="width: 14px; height: 18px; margin-right: 10px; "
                />
              </span>
              <span class="title-age">距离：{{ editOrderFrom.distance }}</span>
            </div>
            <el-descriptions-item
              label="备注"
              contentStyle=" color:#818693;"
              labelStyle="margin-left:20px;"
              >{{
                editOrderFrom.mark ? editOrderFrom.mark : '暂无'
              }}</el-descriptions-item
            >
          </el-descriptions>
        </el-collapse-item>
        <!-- 订单跟踪 -->
        <el-collapse-item title="订单跟踪" name="2" style="margin-top: 20px;">
        </el-collapse-item>
        <!-- 订单轨迹 -->
        <el-collapse-item title="订单轨迹" name="3" style="margin-top: 20px;">
          <!-- <template #default="{row}" > -->
          <div style="position: relative;">
            <baidu-map
              class="map"
              :scroll-wheel-zoom="true"
              :center="map.center"
              :zoom="8"
              @ready="ready"
              style="height: 800px;"
            >
              <bm-polyline stroke-color="red" :stroke-weight="2"></bm-polyline>
            </baidu-map>
            <div class="destination-left">
              目的地
            </div>
            <div class="destination-right">
              {{ editOrderFrom.receiverCity.name }}
            </div>
          </div>
          <!-- </template> -->
        </el-collapse-item>
        <!-- 取件信息 -->
        <el-collapse-item title="取件信息" name="4" style="margin-top: 20px;">
          <el-descriptions
            :column="4"
            size="medium"
            style="margin-bottom: 20px;"
          >
            <el-descriptions-item
              label="所在网点"
              contentStyle="margin-left: 27px; color:#818693;"
              >{{ editOrderFrom.taskPickup.agency.name }}</el-descriptions-item
            >
            <el-descriptions-item
              label="取件类型"
              contentStyle=" color:#818693;"
              >{{
                editOrderFrom.pickupType === 1 ? '网点自寄' : '上门取件'
              }}</el-descriptions-item
            >
            <el-descriptions-item
              label="作业状态"
              contentStyle=" color:#818693;"
              >{{ courierStaus }}</el-descriptions-item
            >
            <el-descriptions-item
              label="取件快递员"
              contentStyle=" color:#818693;"
              >{{ editOrderFrom.taskPickup.courier.name }}</el-descriptions-item
            >
            <el-descriptions-item
              label="快递员电话"
              contentStyle=" color:#818693;"
              >{{
                editOrderFrom.taskPickup.courier.mobile
              }}</el-descriptions-item
            >
            <el-descriptions-item
              label="预计取件时间"
              contentStyle=" color:#818693;"
              >{{ editOrderFrom.estimatedStartTime }}</el-descriptions-item
            >
            <el-descriptions-item
              label="取件完成时间"
              contentStyle=" color:#818693;"
              >{{ editOrderFrom.estimatedArrivalTime }}</el-descriptions-item
            >
          </el-descriptions>
        </el-collapse-item>
        <!-- 费用信息 -->
        <el-collapse-item title="费用信息" name="5" style="margin-top: 20px;">
          <el-descriptions
            :column="3"
            size="medium"
            style="margin-bottom: 20px;"
          >
            <el-descriptions-item
              label="运费"
              contentStyle=" color:#818693; line-height:18px;"
            >
              <span
                style="font-size: 18px; color: #FFB302; margin-right: 20px;"
                >{{ editOrderFrom.amount }}</span
              >元</el-descriptions-item
            >
            <el-descriptions-item
              label="支付方式"
              contentStyle=" color:#818693;"
              >{{
                editOrderFrom.paymentMethod === 1 ? '预结' : '到付'
              }}</el-descriptions-item
            >
            <el-descriptions-item
              label="付款状态"
              contentStyle=" color:#818693;"
              >{{
                editOrderFrom.paymentStatus === 1 ? '未付' : '已付'
              }}</el-descriptions-item
            >
          </el-descriptions>
        </el-collapse-item>
        <!-- 货品信息 -->
        <el-collapse-item title="货品信息" name="6" style="margin: 20px 0;">
          <el-table :data="commodityData" show-summary>
            <!-- 序号 -->
            <el-table-column label="序号" width="60px">
              <template slot-scope="scope">
                {{ scope.$index + 1 }}
              </template>
            </el-table-column>
            <!-- 、货品名称 -->
            <el-table-column label="货品名称" width="252px" prop="name">
              <template #default="{row}">
                <el-input
                  v-if="row.isEdit"
                  v-model="row.editRow.name"
                ></el-input>
                <span v-else>{{ row.name }}</span>
              </template>
            </el-table-column>
            <!-- 货品类型 -->
            <el-table-column label="货品类型" width="249px">
              <template #default="{row}">
                <el-select
                  v-if="row.isEdit"
                  v-model="row.editRow.goodsTypeName"
                >
                  <el-option
                    v-for="(item, index) in Typeofgoods"
                    :key="index"
                    :label="item"
                    :value="item"
                  >
                  </el-option>
                </el-select>
                <span v-else>{{ row.goodsType.name }}</span>
              </template>
            </el-table-column>
            <!-- 重量 -->
            <el-table-column label="重量(千克)" width="249px" prop="weight">
              <template #default="{row}">
                <el-input
                  v-if="row.isEdit"
                  v-model="row.editRow.weight"
                ></el-input>
                <span v-else>{{ row.weight }}</span>
              </template>
            </el-table-column>
            <!-- 体积 -->
            <el-table-column label="体积(立方)" width="249px" prop="volume">
              <template #default="{row}">
                <el-input
                  v-if="row.isEdit"
                  v-model="row.editRow.volume"
                ></el-input>
                <span v-else>{{ row.volume }}</span>
              </template>
            </el-table-column>
            <!-- 操作 -->
            <el-table-column label="操作" width="150px" align="center">
              <template #default="{row}">
                <template v-if="row.isEdit">
                  <el-button type="primary" size="mini" @click="editBtnOK(row)"
                    >确定</el-button
                  >
                  <el-button size="mini" @click="row.isEdit = false"
                    >取消</el-button
                  >
                </template>
                <template v-else>
                  <el-button type="text" @click="edit(row)">编辑</el-button>
                  <el-button type="text" style="color: red;" @click="del(row)"
                    >删除</el-button
                  >
                </template>
              </template>
            </el-table-column>
          </el-table>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>
<script>
import {
  orderDetail,
  getGoodsTypeApi,
  updateOrder,
  deleteOrder,
  getOrderTrackApi
} from '@/api/order'
import qidian from '@/assets/icon-open.png'
import zhong from '@/assets/icon-end.png'

export default {
  created() {
    this.orderDetail()
    this.getGoodsTypeApi()
    this.getOrderTrackApi()
  },

  data() {
    return {
      editOrderFrom: {}, //页面数据
      status: '', //订单状态
      courierStaus: '', //作业状态
      activeNames: ['1', '2', '3', '4', '5', '6'],
      commodityData: [], //浅拷贝 页面数据的货品集合
      Typeofgoods: [], //货品类型
      map: {
        center: { lng: 113.763924, lat: 22.938634 },
        zoom: 18,
        show: true,
        dragging: true
      },
      lineList: []
    }
  },
  methods: {
    //轨迹配置
    ready({ BMap, map }) {
      //起点标注
      var point = new BMap.Point(this.lineList[0].lng, this.lineList[0].lat)
      //  var myIcon = new BMap.Icon(qidian, new BMap.Size(50, 50))
      //  var marker = new BMap.Marker(point, { icon: myIcon }) // 创建标注
      //  map.addOverlay(marker) // 将标注添加到地图中

      //终点标注
      var point2 = new BMap.Point(this.lineList[1].lng, this.lineList[1].lat)
      // var myIcon2 = new BMap.Icon(zhong, new BMap.Size(50, 50))
      // var marker2 = new BMap.Marker(point2, { icon: myIcon2 }) // 创建标注

      // map.addOverlay(marker2) // 将标注添加到地图中

      //设置轨迹样式
      var array = []

      this.lineList.forEach(Element => {
        array.push(new BMap.Point(Element.lng, Element.lat))
      })

      var polyline = new BMap.Polyline(array, {
        strokeColor: 'red',
        strokeWeight: 5,
        strokeOpacity: 0.5
      })
      map.addOverlay(polyline)
    },
    // 获取订单详情
    async orderDetail() {
      const res = await orderDetail(this.$route.params.id)
      this.editOrderFrom = res.data
      this.commodityData = res.data.orderCargoDTOS
      this.state()
      this.map.center = {
        lng: res.data.receiverCounty.lng,
        lat: res.data.receiverCounty.lat
      }
      this.lineList = [
        { lng: res.data.senderCounty.lng, lat: res.data.senderCounty.lat },
        { lng: res.data.receiverCounty.lng, lat: res.data.receiverCounty.lat }
      ]
      // console.log(this.lineList);
      // console.log(this.editOrderFrom);
      this.getcourierStaus()
      this.commodityData.forEach(item => {
        this.$set(item, 'isEdit', false)
        this.$set(item, 'editRow', {
          name: item.name,
          volume: item.volume,
          weight: item.weight,
          goodsTypeName: item.goodsType.name
        })
        // console.log(this.commodityData[0].goodsType);
        //  console.log(this.commodityData[0].editRow.goodsTypeName);
      })
    },
    // 订单状态判断
    state() {
      if (this.editOrderFrom.status === 22000) {
        this.status = '已取消'
      } else if (this.editOrderFrom.status === 23000) {
        this.status = '待取件'
      } else if (this.editOrderFrom.status === 23001) {
        this.status = '已取件'
      } else if (this.editOrderFrom.status === 23002) {
        this.status = '网点自寄'
      } else if (this.editOrderFrom.status === 23003) {
        this.status = '网点入库'
      } else if (this.editOrderFrom.status === 23004) {
        this.status = '待装车'
      } else if (this.editOrderFrom.status === 23005) {
        this.status = '运输中'
      } else if (this.editOrderFrom.status === 23006) {
        this.status = '网点出库'
      } else if (this.editOrderFrom.status === 23007) {
        this.status = '待派送'
      } else if (this.editOrderFrom.status === 23008) {
        this.status = '派送中'
      } else if (this.editOrderFrom.status === 23009) {
        this.status = '已签收'
      } else if (this.editOrderFrom.status === 23010) {
        this.status = '已拒收'
      } else if (this.editOrderFrom.status === 23011) {
        this.status = '已取消'
      }
    },
    // 作业状态判断
    getcourierStaus() {
      if (this.editOrderFrom.taskPickup.status === 1) {
        this.courierStaus = '新任务'
      } else if (this.editOrderFrom.taskPickup.status === 2) {
        this.courierStaus = '已完成'
      } else if (this.editOrderFrom.taskPickup.status === 3) {
        this.courierStaus = '已取消'
      }
    },
    // 货物类型数据
    edit(row) {
      // console.log(row);
      row.isEdit = true
      row.editRow.name = row.name
      row.editRow.goodsTypeName = row.goodsType.name
      row.editRow.weight = row.weight
      row.editRow.volume = row.volume
    },
    // 点击确定
    async editBtnOK(row) {
      if (row.editRow.name && row.editRow.weight && row.editRow.volume) {
        // 调用更新接口
        this.editOrderFrom
        await updateOrder(row.id, this.editOrderFrom)
        row.name = row.editRow.name
        row.goodsType.name = row.editRow.goodsTypeName
        row.weight = row.editRow.weight
        row.volume = row.editRow.volume
        this.$message.success('编辑成功')
        // 退出编辑
        row.isEdit = false
      } else {
        // 校验不通过
        this.$message.warning('修改内容不能为空')
      }
    },
    //货品类型
    async getGoodsTypeApi() {
      const res = await getGoodsTypeApi()
      console.log(res)
      res.data.forEach(item => {
        this.Typeofgoods.push(item.name)
      })
      console.log(this.Typeofgoods)
    },
    // 删除按钮
    del(row) {
      this.$confirm('此操作将永久删除该部门, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })

        .then(async () => {
          await deleteOrder(row.id)
          // 提示用户
          this.$message.success('删除成功')
          this.orderDetail()
        })
        .catch(() => {
          // 用户点击取消
        })
    },
    // 订单轨迹
    async orderLocus() {
      const res = await getOrderTrackApi(this.$route.params.id)
      console.log(res)
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import './index.scss';
::v-deep div.BMap_cpyCtrl.BMap_noprint.anchorBL {
  display: none;
}
// 移除左下角百度地图logo
::v-deep div.anchorBL {
  display: none;
}
// 悬浮地图时不展示小手
::v-deep .BMap_mask {
  cursor: default;
}
.destination-left {
  position: absolute;
  width: 50px;
  height: 30px;
  font-size: 12px;
  top: 10px;
  left: 10px;
  background-color: #fff;
  line-height: 30px;
  border-radius: 50% 0 0 50%;
  text-align: center;
}
.destination-right {
  position: absolute;
  width: 50px;
  height: 30px;
  font-size: 14px;
  top: 10px;
  left: 60px;
  background-color: #f6eeec;
  border-radius: 0 50% 50% 0;
  text-align: center;
  line-height: 30px;
}
</style>
<style lang="scss">
// 移除左下角百度地图版权
</style>
